<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="政策" name="first" />
      <el-tab-pane label="资讯" name="second" />
    </el-tabs>
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true">
      <el-form-item label="名称" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态">
          <el-option v-for="dict in dict.type.sys_states" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" class="add" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" class="delBtn" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['bus:policy:add']" plain icon="el-icon-plus" class="add" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['bus:policy:delete']" plain icon="el-icon-delete" class="delBtn" @click="handleDelete">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download"
          @click="handleExport">导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table ref="table" :key="tableKey" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
      style="margin-top: 20px">
      <el-table-column type="selection" width="55" align="center" />
      <template v-if="activeName == 'first'">
        <el-table-column label="城市名称" prop="areaName" width="120" />
        <el-table-column label="上级" prop="parentAreaName" :show-overflow-tooltip="true" width="150" />
      </template>
      <el-table-column label="标题名称" prop="title" :show-overflow-tooltip="true" width="150" />
      <template v-if="activeName != 'first'">
        <el-table-column label="图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="'/api' + scope.row.imgUrl" alt="" class="img" />
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="orderNum" width="100" />
      </template>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_states" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <template v-if="activeName == 'first'">
        <el-table-column label="排序" prop="orderNum" width="100" />
      </template>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" v-hasPermi="['bus:policy:edit']" type="text" class="btnText" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button class="btnText" v-hasPermi="['bus:policy:delete']" size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { getList, removeData } from "@/api/index";
export default {
  name: "Role",
  dicts: ["sys_states"],
  data() {
    return {
      tableKey: 0,
      activeName: "first",
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 10,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    const type = this.$route.query.type;
    if (type) {
      this.activeName = type == 1 ? "first" : "second";
    }
    this.getList();
  },
  methods: {
    handleClick(tab, event) {
      this.resetQuery();
      this.tableKey += 1;
    },
    /** 查询角色列表 */
    getList() {
      const type = this.activeName === "first" ? 1 : 2;
      this.loading = true;
      getList({ ...this.queryParams, type: type }).then((response) => {
        this.roleList = response.data.records;
        this.total = response.data.total || 0;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$nextTick(() => {
        this.getList();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      const type = this.activeName === "first" ? 1 : 2;
      this.$router.push("/add?type=" + type);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log(row);
      this.$router.push(`/add?id=${row.id}`);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if (!row.id && !this.ids.length) {
        return this.$message.error("请选择要删除的数据");
      }
      const roleIds = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除数据？")
        .then(function () {
          return removeData(roleIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/role/export",
        {
          ...this.queryParams,
        },
        `role_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.btnText {
  color: #0052d9 !important;
}

.dialogForm {
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep.el-form--label-top .el-form-item__label {
    padding: 0;
  }
}

.add {
  background: #0052d9;
  color: #fff;
  border: none;
}

.delBtn {
  background: #e7e7e7;
  color: #000;
  border: none;
}

.open {
  width: 52px;
  height: 32px;
  background: #e3f9e9;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #2ba471;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #2ba471;
}

.close {
  width: 52px;
  height: 32px;
  background: #d8d8d8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #767676;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #767676;
}

.statusBox {
  width: 100%;
  display: flex;
  justify-content: center;
}

.img {
  width: 38px;
  height: 38px;
}
</style>
